<template>
  <div class="index-wrap">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">老人年龄段分布统计</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart1">
            <v-chart
              ref="chart1"
              autoresize
              :option="chart1"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :xl="12" :lg="12">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">近5年老人数据统计</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart1">
            <v-chart
              autoresize
              :option="chart2"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">床位类型统计</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart1">
            <v-chart
              autoresize
              :option="chart3"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <!-- <div class="medical-header">
            <div class="medical-title">卫生间看护数据统计</div>
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              size="mini"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div> -->
          <div class="medical-chart1">
            <v-chart
              autoresize
              :option="chart4"
              style="width: 100%; height: 100%;"
            />
            <div class="medical-room-wrap">
              <div class="medical-room">
                <div class="room-text">
                  紧急呼叫次数
                </div>
                <div class="room-text">
                  跌倒报警次数
                </div>
              </div>
              <div class="medical-room">
                <div class="room-text">
                  水浸报警次数
                </div>
                <div class="room-text">
                  无效报警次数
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :xl="12" :lg="12">
        <div class="medical-item medical-left-top">
            <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
            <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
            <!-- <div class="medical-header">
              <div class="medical-title">床位看护数据统计</div>
              <el-date-picker
                v-model="year1"
                type="month"
                :editable="false"
                placeholder="选择年月"
                class="fr"
                size="mini"
                value-format="yyyy-MM"
                @change="handleChange"
              ></el-date-picker>
            </div> -->
            <div class="medical-chart2">
              <div class="kanhu-top">
                <div>
                  <img src="@/assets/institutional/step1.png" >
                  <div class="kanhu-text">
                    <p>300</p>
                    <span>生命体征报警次数</span>
                  </div>
                </div>
                <div>
                  <img src="@/assets/institutional/step2.png" >
                  <div class="kanhu-text">
                    <p>200</p>
                    <span>无效报警次数</span>
                  </div>
                </div>
              </div>
              <div class="kanhu-bottom">
                <div>
                  <img src="@/assets/institutional/step3.png" >
                  <div class="kanhu-text">
                    <p>100</p>
                    <span>呼叫请求次数</span>
                  </div>
                </div>
                <div>
                  <img src="@/assets/institutional/step4.png" >
                  <div class="kanhu-text">
                    <p>700</p>
                    <span>离床报警次数</span>
                  </div>
                </div>
                <div>
                  <img src="@/assets/institutional/step5.png" >
                  <div class="kanhu-text">
                    <p>600</p>
                    <span>尿湿报警次数</span>
                  </div>
                </div>
                <div>
                  <img src="@/assets/institutional/step6.png" >
                  <div class="kanhu-text">
                    <p>400</p>
                    <span>离床预警次数</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="6" :xl="6" :lg="6">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">入住老人介护等级数据统计</div>
            <div>2018-08-18</div>
          </div>
          <div class="medical-chart1">
            <v-chart
              autoresize
              :option="chart5"
              style="width: 100%; height: 100%;"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import VChart from 'vue-echarts'
  import { getMedicineData } from "@/api/diseaseApi";
  import { healthData } from "@/api/caseApi";
  import { getData, getDataYbed, getDataYwc } from "@/api/orderData";
  export default {
    name: "Index",
    components: {
      VChart,
    },
    data() {
      return {
        year1: "",
        chart1: {
          title: {
            show: false
          },
          tooltip: {
              trigger: 'item',
          		formatter: function(params){
          			return params.data.name +"岁 : "+params.data.value+"人" + " " + params.percent + "%";
          		}
          },
          legend: [
          	{
          		orient: 'horizontal',
          		bottom: '20%',
          		left: "center",
          		icon: "circle",
          		data: ["61_70岁", "71_80岁"],
          		itemWidth: 7,  // 设置宽度
          		itemHeight: 7, // 设置高度
          		itemGap: 60,
          		textStyle: {
          			color: '#597093',
          			fontSize: 13
          		}
          	},
          	{
          		orient: 'horizontal',
          		bottom: '10%',
          		left: "center",
          		icon: "circle",
          		data: ["81_90岁", "91_120岁"],
          		itemWidth: 7,  // 设置宽度
          		itemHeight: 7, // 设置高度
          		itemGap: 70,
          		// itemGap: 60,
          		textStyle: {
          			color: '#597093',
          			fontSize: 13
          		}
          	}
          ],
          color: ["#3EE09A", "#9B4AF8", "#FF8D00", "#FB497C"],
          series: [
              {
          				type: 'pie',
          				radius: '50%',
          				center: ['50%', '40%'],
          				radius: ['25%', '35%'],
          				avoidLabelOverlap: false,
          				data: [],
          				label: {
          					color: "#fff",
          					formatter: '{b} {d}%',
          				},
          				emphasis: {
          				    itemStyle: {
          				        shadowBlur: 10,
          				        shadowOffsetX: 0,
          				        shadowColor: 'rgba(0, 0, 0, 0.5)'
          				    }
          				}
              }
          ]
        },
        chart2: {
           legend: {
              orient: 'horizontal',
          		right: '10%',
          		left: "right",
              top: 10,
          		icon: "circle",
          		itemWidth: 10,  // 设置宽度
          		itemHeight: 10, // 设置高度
          		itemGap: 50,
          		textStyle: {
          			color: '#597093',
          			fontSize: 13
          		}
            },
            grid: {
                top: '20%',
                left: '2%',
                right: '5%',
                bottom: '6%',
                containLabel: true
            },
            tooltip: {},
            color: ["#4992FF", "#7CFFB2", "#FDDD60"],
            dataset: {
              source: [
                ['product'],
                ['预约登记'],
                ['试住老人'],
                ['入住老人']
              ]
            },
            xAxis: {
                type: 'category', gridIndex: 0,
                axisLine: {
                  show: true
                },
                axisTick: {
                  show: false, //隐藏X轴刻度
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#9997AF',
                    fontSize: 14
                  }
                },
              },
            yAxis: {
              type: "value",
              name: "人",
              nameGap: 25,
              nameTextStyle: {
              	color: '#999',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                		color: '#9997AF',
                		fontSize: 14,
                    fontWeight: "400"
                }
              },

            },
            series: [
              { type: 'bar', barGap: 0, barWidth: 40, seriesLayoutBy: 'row' },
              { type: 'bar', barWidth: 40, seriesLayoutBy: 'row' },
              { type: 'bar', barWidth: 40, seriesLayoutBy: 'row' },
            ]
        },
        chart3: {
            title: {
              show: false
            },
            tooltip: {
                trigger: 'item',
            		formatter: function(params){
            			return params.data.name +"岁 : "+params.data.value+"人";
            		}
            },
            color: ["#3EE09A","#5583FF","#FB497C","#FF8D00", "#9B4AF8"],
            legend: [
              {
                orient: 'horizontal',
                bottom: '15%',
                left: "center",
                icon: "circle",
                data: ["临终关怀/医疗床", "智能护理床/全护型"],
                itemWidth: 7,  // 设置宽度
                itemHeight: 7, // 设置高度
                itemGap: 60,
                textStyle: {
                  color: '#597093',
                  fontSize: 13
                }
              },
              {
                orient: 'horizontal',
                bottom: '5%',
                left: "center",
                icon: "circle",
                data: ["木床/自理型", "护理床/介助型", "摇床/介护型"],
                itemWidth: 7,  // 设置宽度
                itemHeight: 7, // 设置高度
                itemGap: 50,
                // itemGap: 60,
                textStyle: {
                  color: '#597093',
                  fontSize: 13
                }
              }
            ],
            series: [
                {
            				type: 'pie',
            				center: ['47%', '40%'],
            				radius: ['25%', '35%'],
            				avoidLabelOverlap: false,
            				data: [],
            				label: {
            					color: "#fff",
            					formatter: '{b} {d}%',
            				},
            				emphasis: {
            				    itemStyle: {
            				        shadowBlur: 10,
            				        shadowOffsetX: 0,
            				        shadowColor: 'rgba(0, 0, 0, 0.5)'
            				    }
            				}
                }
            ]
          // color: ["#3EE09A","#5583FF","#FB497C","#FF8D00", "#9B4AF8"],
          //   legend: [
          // 		{
          // 			orient: 'horizontal',
          // 			bottom: '15%',
          // 			left: "center",
          // 			icon: "circle",
          // 			data: ["临终关怀/医疗床", "智能护理床/全护型"],
          // 			itemWidth: 7,  // 设置宽度
          // 			itemHeight: 7, // 设置高度
          // 			itemGap: 60,
          // 			textStyle: {
          // 				color: '#597093',
          // 				fontSize: 13
          // 			}
          // 		},
          // 		{
          // 			orient: 'horizontal',
          // 			bottom: '5%',
          // 			left: "center",
          // 			icon: "circle",
          // 			data: ["木床/自理型", "护理床/介助型", "摇床/介护型"],
          // 			itemWidth: 7,  // 设置宽度
          // 			itemHeight: 7, // 设置高度
          // 			itemGap: 50,
          // 			// itemGap: 60,
          // 			textStyle: {
          // 				color: '#597093',
          // 				fontSize: 13
          // 			}
          // 		}
          // 	],
          //   tooltip: {
          //       trigger: 'item',
          //   		formatter: function(params){
          //   			return params.data.name +"岁 : "+params.data.value+"人";
          //   		}
          //   },
          //   series: [
          //     {
          //       type: 'pie',
          //       radius: [30, 150],
          //       center: ['50%', '40%'],
          //       roseType: 'area',
          //       itemStyle: {
          //         borderRadius: 8
          //       },
          //       emphasis: {
          //         label: {
          //           show: false
          //         },
          //         labelLine: {
          //           show: false
          //         },
          //       },
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       },
          //       data: [
          //         { value: 40, name: '临终关怀/医疗床' },
          //         { value: 38, name: '智能护理床/全护型' },
          //         { value: 32, name: '木床/自理型' },
          //         { value: 30, name: '护理床/介助型' },
          //         { value: 28, name: '摇床/介护型' }
          //       ]
          //     }
          //   ]
        },
        chart4: {
          polar: {
              radius: [30, '60%'],
              center: ['50%', "40%"]
            },
            angleAxis: {
              startAngle: 75,
            },
            radiusAxis: {
              type: 'category',
              data: ['紧急呼叫次数', '跌倒报警次数', '水浸报警次数', '无效报警次数'],
              axisLabel: {
                show: false
              },
            },

            tooltip: {},
            series: {
              max: 300,
              type: 'bar',
              data: [200, 100, 50, 150],
              coordinateSystem: 'polar',
              label: {
                show: false
              },
              itemStyle: {
            		color: function(params) {
            				// 给出颜色组
            				if(params.dataIndex == 3) {
            				  return "#4993FF"
            				} else if(params.dataIndex == 2) {
            				  return "#FB497C"
            				} else if(params.dataIndex == 1) {
            				  return"#3EE09A"
            				} else if(params.dataIndex == 0) {
            				  return "#9B4AF8"
            				}
            		}
              },
              label: {
                show: false,
                position: 'middle',
                formatter: '{b}: {c}'
              }
            }
        },
        chart5: {
          color: ['#0B7AFD'],
          grid: {
            top: "13%",
            bottom: "10%",
            left: "8%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: 'cross',
              label: {
                color: "#ffffff",
                borderColor: "#0B7AFD",
                shadowColor: "#0B7AFD",
                backgroundColor: '#0B7AFD'
              },
            },
          },
          xAxis: {
            data: ["自理型","介护型","全护型","介助型","特护型"],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#226CA3',
                fontSize: 12
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "人",
              nameGap: 25,
              nameTextStyle: {
                color: '#226CA3',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                    color: '#226CA3',
                    fontSize: 14,
                    fontWeight: "bold"
                }
              },
            },
          ],
          series: [
            {
              name: "人",
              type: "bar",
              data: [120,240,150,158,140],
              barWidth: 23,
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(110, 193, 244, 0.2)',
                borderRadius: 12
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 12,
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          {offset: 0, color: '#01B1FF'},
                          {offset: 1, color: '#035CFF'}
                      ]
                  ),
                }
              },
            },
          ]
        }
      }
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      getTableData() {
        healthData().then((resp) => {
          if (resp.code === 200) {
            let elderData = [];
            for (let index = 0; index < resp.data.elder[0].length; index++) {
              const element = resp.data.elder[0][index];
              let temp = {};
              temp.name = Object.keys(element)[0] + "岁";
              temp.value = Object.values(element)[0];
              elderData.push(temp);
            }
            this.chart1.series[0].data = elderData;
          }
        });
        getData().then((resp) => {
          if (resp.code === 200) {
            let xAxisData1 = [];
            let elderData = [];
            let reserveData = [];
            let tryData = [];
            for (
              let index = 0;
              index < resp.data.elder[0].length,
                index < resp.data.reserve[0].length,
                index < resp.data.try[0].length;
              index++
            ) {
              const element = resp.data.elder[0][index];
              const element1 = resp.data.reserve[0][index];
              const element2 = resp.data.try[0][index];
              xAxisData1.push(Object.keys(element)[0]);
              elderData.push(Object.values(element)[0]);
              reserveData.push(Object.values(element1)[0]);
              tryData.push(Object.values(element2)[0]);
            }
            this.$set(this.chart2.dataset.source, 0, ['product'].concat(xAxisData1));
            this.$set(this.chart2.dataset.source, 1, ['预约登记'].concat(reserveData));
            this.$set(this.chart2.dataset.source, 2, ['试住老人'].concat(tryData));
            this.$set(this.chart2.dataset.source, 3, ['入住老人'].concat(elderData));
            // this.chart2.yAxis.data = xAxisData1;
            // this.chart2.series[2].data = elderData;
            // this.chart2.series[0].data = reserveData;
            // this.chart2.series[1].data = tryData;
            //床位类型统计
            let bed_typeData = [];
            for(let key in resp.data.bed_type){
              bed_typeData.push({
                name: key,
                value: Number(resp.data.bed_type[key])
              })
            }
            this.chart3.series[0].data = bed_typeData;
            //入住老人类型统计
            let elderTypeData = [];
            let xAxisData3 = [];
            for (
              let index = 0;
              index < resp.data.elder_type[0].length;
              index++
            ) {
              let temp = {};
              const element = resp.data.elder_type[0][index];
              xAxisData3.push(Object.keys(element)[0]);
              temp.name = Object.keys(element)[0];
              temp.value = Object.values(element)[0];
              elderTypeData.push(temp);
            }
            this.chart5.series[0].data = elderTypeData;
          }
        });
      },
      handleChange(value) {
      },
      handleCommand(command) {
        this.$message("click on item " + command);
      },
    },
  };
</script>
<style lang="scss" scoped>
  @keyframes rotate {
  	    from {
  	        transform: rotate(0deg);
  	    }
  	    to {
  	        transform: rotate(360deg);
  	    }
  	}
    .fr{
        width: 117px;
        position: absolute;
        right: 23px;
        background: transparent;
        ::v-deep{
          .el-input__inner{
            border-color: #334973;
            background: transparent;
            color: #fff;
          }
          .el-input__prefix{
                font-size: 20px;
                color: #5391d9;
          }
        }
    }
    .kanhu-top {
        display: flex;
        justify-content: center;
        & > div{
          &:nth-child(n+2) {
            margin-left: 50px;
          }
        }
    }
    .kanhu-top img,
    .kanhu-bottom img
    {
      width: 128px;
    }
    .kanhu-text {
        margin-top: 15px;
    }
    .kanhu-text p {
        font-size: 20px;
        font-weight: bold;
        color: #00A2FF;
        text-align: center;
        line-height: 20px;
    }
    .kanhu-text span {
        display: block;
        font-size: 14px;
        color: rgb(79 157 226 / 56%);
        font-weight: 400;
        margin-top: 10px;
        line-height: 14px;
        text-align: center;
    }
    .kanhu-bottom {
        display: flex;
        justify-content: center;
        margin-top: 24px;
        & > div{
          &:nth-child(n+2) {
            margin-left: 50px;
          }
        }
    }
    .medical-room-wrap{
      position: absolute;
      bottom: 30px;
      width: 100%;
      left: 0;
      .medical-room {
          display: flex;
          justify-content: center;
          font-size: 13px;
          color: #597093;
          &:nth-child(2){
            margin-top: 22px;
            .room-text{
              &:nth-child(1) {
                &::before {
                  background-color: #9B4AF8;
                }
              }
              &:nth-child(2) {
                &::before {
                  background-color: #3EE09A;
                }
              }
            }
          }
          .room-text{
            padding-left: 16px;
            line-height: 13px;
            position: relative;
            &::before{
              content: "";
              display: block;
              position: absolute;
              left: 0;
              top: 1px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #5583FF;
            }
            &:nth-child(1) {
              &::before {
                background-color: #5583FF;
              }
            }
            &:nth-child(2) {
              margin-left: 70px;
              &::before {
                background-color: #FB497C;
              }
            }

          }
      }
    }
  .index-wrap {
    min-height: calc( 100vh - 65px) !important;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: url(../../assets/institutional/bg.png) no-repeat;
    background-size: cover;
    .medical-left-top{
      height: 458px;
    }
    .medical-chart1{
      width: 100%;
      height: 422px;
      padding: 0 22px 8px 23px;
      box-sizing: border-box;
    }
    .medical-chart1-xline{
      position: absolute;
      top: 64px;
      left: 23px;
      font-size: 13px;
      color: #226CA3;
      line-height: 12px;
      font-weight: bold;
    }
    .medical-chart1-xline li:nth-child(n+2){
      margin-top: 44px;
    }
    .medical-item{
      width: 100%;
      border: 2px solid #394E75;
      border-radius: 10px 0px 0 10px;
      position: relative;
      background: rgba(36, 57, 96, 0.13);
      box-shadow: inset 0 0 19px rgb(26 61 122);
      .medical-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 23px 20px 0 23px;
        .medical-title{
          position: absolute;
          font-size: 20px;
          color: #ffffff;
          font-weight: bold;
          padding-left: 20px;
          line-height: 20px;
          &::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 11px;
            height: 20px;
            background-color: #009CFF;
          }
        }
      }
      &::before{
        content: "";
        display: block;
        position: absolute;
        right: -2px;
        top: -2px;
        width: 0;
        height: 0;
        border-top: 7px solid #4DBECE;
        border-left: 7px solid transparent;
        z-index: 1;
      }
      &::after{
        content: "";
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 0;
        height: 0;
        border-bottom: 17px solid #4DBECE;
        border-left: 17px solid transparent;
      }
      .medical-top{
        width: 71px;
        height: 65px;
        position: absolute;
        left: -2px;
        top: -4px;
        z-index: 1;
				object-fit: inherit;
      }
      .medical-bot{
        width: 71px;
        position: absolute;
        left: -2px;
        bottom: -4px;
        z-index: 1;
      }
    }
  }
</style>
